<template>

  <el-card style="box-shadow: none;">
    <div class="container" >

      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1707295744799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="1302" width="30" height="30"><path d="M481.28 204.8c158.35136 0 286.72 128.36864 286.72 286.72 0 70.7584-25.64096 135.53664-68.11648 185.5488l123.12576 123.2896a15.36 15.36 0 1 1-21.72928 21.7088l-122.51136-122.6752A285.73696 285.73696 0 0 1 481.28 778.24c-158.35136 0-286.72-128.36864-286.72-286.72s128.36864-286.72 286.72-286.72z m0 30.72C339.88608 235.52 225.28 350.12608 225.28 491.52s114.60608 256 256 256S737.28 632.91392 737.28 491.52s-114.60608-256-256-256z" fill="#062C3D" p-id="1303"></path><path d="M356.47488 507.4944c12.98432 32.0512 32.78848 57.9584 59.63776 78.1312 27.32032 20.52096 60.53888 34.93888 99.86048 43.17184l-8.3968 40.09984c-44.99456-9.4208-83.7632-26.25536-116.08064-50.52416-32.80896-24.65792-57.22112-56.58624-72.97024-95.49824l37.94944-15.36z" fill="#76cb02" p-id="1304" data-spm-anchor-id="a313x.collections_detail.0.i0.33973a817vAg9o" class="selected"></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">筛选搜索</h2>
        </div>
      </div>

      <el-form @submit.prevent ref="inputForm" :inline="true" :model="inputForm" class="demo-form-inline" style="margin-left: 20px" >
        <el-row>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.studentId" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">学</span><span style="transition-delay:150ms">生</span><span style="transition-delay:200ms">编</span><span style="transition-delay:250ms">号</span>
              </label>
            </div >
          </el-form-item>
          <el-form-item>
            <div class="form-control">
              <input type="text" required v-model="inputForm.commodityId" @keyup.enter="searchDataList"/>
              <label>
                <span style="transition-delay:0ms">输</span><span style="transition-delay:50ms">入</span><span style="transition-delay:100ms">商</span><span style="transition-delay:150ms">品</span><span style="transition-delay:200ms">编</span><span style="transition-delay:250ms">号</span>
              </label>
            </div >
          </el-form-item>
          <ul class="form-control" style="margin-left: -35px;margin-top: 20px">
            <li class="icon-content" >
              <form>
                <button
                    class="link"
                    data-social="inputDate"
                    type="button"
                    @click="searchDataList"
                >
                  <svg t="1707225141071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                       p-id="1299" width="200" height="200">
                    <path d="M902.174374 942.511058c6.66684 6.66684 15.400758 9.999748 24.133653 9.999748s17.466814-3.332908 24.13263-9.999748c13.33368-13.332656 13.33368-34.932604 0-48.266283L816.820404 760.610194c79.380932-79.128175 124.171044-186.079022 124.171044-299.366182 0-233.349629-189.833533-423.183162-423.183162-423.183162-233.333256 0-423.166789 189.834556-423.166789 423.184185s189.833533 423.183162 423.166789 423.183162c35.750225 0 72.399937-4.933359 108.932991-14.650675 18.23327-4.849448 29.067013-23.532973 24.216541-41.74987-4.833075-18.216897-23.532973-29.049616-41.74987-24.216541-30.815843 8.200776-61.566194 12.350283-91.399663 12.350283-195.700147 0-354.899986-159.216211-354.899986-354.916359s159.199839-354.916359 354.899986-354.916359 354.916359 159.216211 354.916359 354.916359c0 106.899682-47.566342 207.082382-130.516566 274.866185-14.59951 11.932774-16.766872 33.432437-4.833075 48.03297"
                          fill="currentColor" p-id="1300"></path>
                  </svg>
                </button>
              </form>
            </li>
          </ul>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card style="box-shadow: none;margin-top: 20px" >
    <div class="container" >
      <div class="row row--top-40" style="display: flex; align-items: center;">
        <div class="col-md-12" style="display: flex; align-items: center;">
          <svg t="1708411655166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16046" id="mx_n_1708411655166" data-spm-anchor-id="a313x.search_index.0.i10.129b3a81vaR55s"
               width="26" height="26"><path d="M764.945067 915.933867H259.054933a95.675733 95.675733 0 0 1-95.573333-95.573334v-590.165333a95.675733 95.675733 0 0 1 95.573333-95.573333H334.506667a27.306667 27.306667 0 0 1 0 54.613333h-75.451734a40.96 40.96 0 0 0-40.96 40.96v590.165333a40.96 40.96 0 0 0 40.96 40.96h505.890134a40.96 40.96 0 0 0 40.96-40.96v-590.165333a40.96 40.96 0 0 0-40.96-40.96h-75.3664a27.306667 27.306667 0 0 1 0-54.613333h75.3664a95.675733 95.675733 0 0 1 95.573333 95.573333v590.165333a95.675733 95.675733 0 0 1-95.573333 95.573334z" fill="#464545" p-id="16047" data-spm-anchor-id="a313x.search_index.0.i9.129b3a81vaR55s" class="selected"></path><path d="M281.992533 404.258133a23.978667 23.978667 0 0 1-2.696533-0.136533c-0.8704 0-1.706667-0.221867-2.645333-0.392533s-1.706667-0.392533-2.594134-0.648534-1.706667-0.5632-2.5088-0.904533-1.706667-0.733867-2.423466-1.143467-1.553067-0.887467-2.286934-1.365333-1.467733-1.041067-2.167466-1.604267-1.348267-1.160533-1.979734-1.792a27.477333 27.477333 0 0 1-8.004266-19.3024 23.586133 23.586133 0 0 1 0.136533-2.696533c0.085333-0.887467 0.221867-1.706667 0.392533-2.645333a23.1424 23.1424 0 0 1 0.6656-2.594134c0.256-0.853333 0.5632-1.706667 0.887467-2.525866s0.733867-1.621333 1.143467-2.4064 0.887467-1.553067 1.3824-2.304 1.024-1.467733 1.5872-2.1504a25.122133 25.122133 0 0 1 1.809066-1.9968c0.631467-0.631467 1.297067-1.2288 1.979734-1.809067s1.416533-1.092267 2.167466-1.5872a23.773867 23.773867 0 0 1 2.286934-1.365333 26.112 26.112 0 0 1 2.423466-1.143467c0.8192-0.341333 1.706667-0.648533 2.5088-0.904533s1.706667-0.477867 2.594134-0.648534a23.552 23.552 0 0 1 2.645333-0.392533 25.736533 25.736533 0 0 1 5.376 0 22.9888 22.9888 0 0 1 2.645333 0.392533 27.0848 27.0848 0 0 1 5.12 1.553067 29.252267 29.252267 0 0 1 4.7104 2.5088 24.951467 24.951467 0 0 1 2.1504 1.5872c0.699733 0.580267 1.365333 1.1776 1.9968 1.809067a25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a26.350933 26.350933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 28.78464 28.78464 0 0 1 1.570133 5.12c0.187733 0.887467 0.3072 1.706667 0.392534 2.645333s0.136533 1.706667 0.136533 2.696533 0 1.792-0.136533 2.679467-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594134A25.821867 25.821867 0 0 1 307.2 387.413333a26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933 25.224533 25.224533 0 0 1-1.5872 2.167467c-0.5632 0.682667-1.1776 1.365333-1.809067 1.9968a29.678933 29.678933 0 0 1-4.1472 3.413333c-0.733867 0.477867-1.518933 0.938667-2.304 1.365334s-1.5872 0.802133-2.4064 1.143466-1.706667 0.631467-2.525866 0.904534a26.197333 26.197333 0 0 1-2.594134 0.648533c-0.8704 0.170667-1.706667 0.3072-2.645333 0.392533a23.483733 23.483733 0 0 1-2.679467 0.1024zM281.992533 568.32a27.5456 27.5456 0 0 1-19.3024-7.9872c-0.631467-0.631467-1.245867-1.314133-1.809066-1.9968s-1.092267-1.416533-1.5872-2.167467-0.955733-1.501867-1.3824-2.286933a29.986133 29.986133 0 0 1-2.030934-4.932267c-0.273067-0.853333-0.477867-1.706667-0.6656-2.594133s-0.3072-1.706667-0.392533-2.645333-0.136533-1.792-0.136533-2.696534 0-1.792 0.136533-2.679466 0.221867-1.706667 0.392533-2.645334 0.392533-1.706667 0.6656-2.594133a26.146133 26.146133 0 0 1 0.904534-2.525867 25.6 25.6 0 0 1 1.1264-2.4064 27.921067 27.921067 0 0 1 2.9696-4.4544 25.122133 25.122133 0 0 1 1.809066-1.9968 27.306667 27.306667 0 0 1 38.6048 0 25.122133 25.122133 0 0 1 1.809067 1.9968c0.5632 0.682667 1.092267 1.416533 1.5872 2.1504a24.046933 24.046933 0 0 1 1.365333 2.304 25.8048 25.8048 0 0 1 1.143467 2.4064 26.146133 26.146133 0 0 1 0.904533 2.525867c0.256 0.853333 0.477867 1.706667 0.6656 2.594133s0.3072 1.706667 0.392534 2.645334 0.136533 1.792 0.136533 2.679466 0 1.706667-0.136533 2.696534-0.221867 1.706667-0.392534 2.645333-0.4096 1.706667-0.6656 2.594133a25.821867 25.821867 0 0 1-0.904533 2.5088 26.112 26.112 0 0 1-1.143467 2.423467 23.773867 23.773867 0 0 1-1.365333 2.286933c-0.494933 0.750933-1.024 1.467733-1.5872 2.167467s-1.1776 1.365333-1.809067 1.9968a27.5456 27.5456 0 0 1-19.3024 7.9872zM281.992533 732.279467c-0.887467 0-1.706667 0-2.696533-0.136534s-1.706667-0.221867-2.645333-0.392533-1.706667-0.4096-2.594134-0.6656-1.706667-0.5632-2.5088-0.904533a26.112 26.112 0 0 1-2.423466-1.143467 23.773867 23.773867 0 0 1-2.286934-1.365333c-0.750933-0.494933-1.467733-1.024-2.167466-1.5872s-1.348267-1.1776-1.979734-1.809067a25.122133 25.122133 0 0 1-1.809066-1.9968 27.921067 27.921067 0 0 1-4.113067-6.8608 26.043733 26.043733 0 0 1-0.887467-2.525867 21.947733 21.947733 0 0 1-0.6656-2.577066c-0.170667-0.887467-0.3072-1.706667-0.392533-2.6624a26.368 26.368 0 0 1 0-5.358934c0.085333-0.887467 0.221867-1.706667 0.392533-2.6624a23.1424 23.1424 0 0 1 0.6656-2.594133c0.256-0.836267 0.546133-1.706667 0.887467-2.5088s0.733867-1.706667 1.143467-2.423467 0.887467-1.553067 1.3824-2.286933 1.024-1.467733 1.5872-2.167467 1.1776-1.365333 1.809066-1.9968 1.297067-1.2288 1.979734-1.792 1.416533-1.109333 2.167466-1.604266 1.501867-0.938667 2.286934-1.365334 1.604267-0.802133 2.423466-1.143466 1.706667-0.631467 2.5088-0.887467 1.706667-0.477867 2.594134-0.6656 1.706667-0.3072 2.645333-0.392533a25.736533 25.736533 0 0 1 5.376 0c0.887467 0.085333 1.706667 0.221867 2.6624 0.392533a25.924267 25.924267 0 0 1 2.577067 0.6656c0.853333 0.256 1.706667 0.5632 2.525866 0.887467s1.706667 0.733867 2.423467 1.143466 1.553067 0.887467 2.286933 1.365334a29.678933 29.678933 0 0 1 4.1472 3.413333c0.631467 0.631467 1.245867 1.314133 1.809067 1.9968s1.092267 1.416533 1.5872 2.167467a23.773867 23.773867 0 0 1 1.365333 2.286933A26.112 26.112 0 0 1 307.2 694.613333c0.341333 0.8192 0.648533 1.706667 0.904533 2.5088s0.477867 1.706667 0.648534 2.594134a23.893333 23.893333 0 0 1 0.4096 2.6624c0 0.887467 0.136533 1.792 0.136533 2.679466s0 1.792-0.136533 2.679467a23.893333 23.893333 0 0 1-0.4096 2.6624 25.856 25.856 0 0 1-0.648534 2.577067 26.146133 26.146133 0 0 1-0.904533 2.525866 25.8048 25.8048 0 0 1-1.143467 2.4064 24.046933 24.046933 0 0 1-1.365333 2.304c-0.494933 0.733867-1.024 1.467733-1.5872 2.1504a26.965333 26.965333 0 0 1-5.956267 5.393067 23.773867 23.773867 0 0 1-2.286933 1.365333 27.665067 27.665067 0 0 1-4.949333 2.048c-0.836267 0.256-1.706667 0.477867-2.577067 0.6656s-1.706667 0.3072-2.6624 0.392534-1.792 0.0512-2.679467 0.0512zM604.7744 404.2752H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 568.32H361.813333a27.306667 27.306667 0 1 1 0-54.613333h242.961067a27.306667 27.306667 0 0 1 0 54.613333zM604.7744 732.279467H361.813333a27.306667 27.306667 0 0 1 0-54.613334h242.961067a27.306667 27.306667 0 0 1 0 54.613334zM750.062933 404.2752h-63.266133a27.306667 27.306667 0 1 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 568.32h-63.266133a27.306667 27.306667 0 0 1 0-54.613333h63.266133a27.306667 27.306667 0 0 1 0 54.613333zM750.062933 732.279467h-63.266133a27.306667 27.306667 0 0 1 0-54.613334h63.266133a27.306667 27.306667 0 0 1 0 54.613334zM669.098667 242.6368H354.986667a47.786667 47.786667 0 0 1-47.786667-47.786667V149.026133a47.786667 47.786667 0 0 1 47.786667-47.786666h314.197333a47.786667 47.786667 0 0 1 47.786667 47.786666v45.824a47.786667 47.786667 0 0 1-47.872 47.786667z m-307.370667-54.613333h300.544V155.8528H361.813333z" fill="#76cb02" p-id="16048" data-spm-anchor-id="a313x.search_index.0.i11.129b3a81vaR55s" class=""></path></svg>
          <h2 class="row__title" style="margin-left: 10px; justify-content: flex-start;">数据列表</h2>
        </div>
      </div>
      <div class="row row--top-20">
        <div class="col-md-12">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!--1.待处理表單-->
            <el-tab-pane label="待处理" name="1">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="pendingDataList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          :row-class-name="tableRowClassName">
                  <el-table-column fixed prop="orderId" align="center" width="80px"/>
                  <el-table-column label="订单编号" prop="orderNumber" align="center"/>
                  <el-table-column label="学生编号" prop="studentId" align="center"/>
                  <el-table-column label="商品编号" prop="commodityId" align="center" />
                  <el-table-column label="下单时间" prop="orderDate" align="center" />
                  <el-table-column fixed="right" align="center">
                    <template #default="scope">
                      <!--追蹤訂單按鈕-->
                      <el-button type="text" @click="checkTimeLine(scope.row)" :class="['custom-button']">
                        <svg width="45" height="25" viewBox="0 0 48 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect width="48" height="28" rx="14" fill="#DAF3F8"/>
                          <path d="M31.2849 19.6266C31.0616 19.6266 30.8809 19.459 30.8809 19.2521C30.8809 19.0452 31.0616 18.8775 31.2849 18.8775H33.2358C33.459 18.8775 33.6397 19.0452 33.6397 19.2521C33.6397 19.459 33.459 19.6266 33.2358 19.6266H31.2849ZM29.1659 21.8893C27.7744 21.8893 26.6418 20.8395 26.6418 19.549C26.6418 18.2585 27.7744 17.2087 29.1659 17.2087C30.557 17.2087 31.6888 18.2585 31.6888 19.549C31.6888 20.8395 30.557 21.8893 29.1659 21.8893ZM29.1659 17.9576C28.2197 17.9576 27.4499 18.6712 27.4499 19.549C27.4499 20.4268 28.2197 21.1403 29.1659 21.1403C30.1117 21.1403 30.8809 20.4268 30.8809 19.549C30.8809 18.6711 30.1117 17.9576 29.1659 17.9576ZM18.6849 10.1275C18.4617 10.1275 18.2809 9.95998 18.2809 9.75302C18.2809 9.5461 18.4616 9.37857 18.6849 9.37857H22.0637C22.2869 9.37857 22.4678 9.5461 22.4678 9.75302C22.4678 9.95996 22.2869 10.1275 22.0637 10.1275H18.6849ZM27.6403 9.72833C27.4171 9.72833 27.2364 9.56071 27.2364 9.35377C27.2364 9.14685 27.4171 8.97932 27.6403 8.97932H31.9035C32.1268 8.97932 32.3076 9.14685 32.3076 9.35377C32.3076 9.56071 32.1268 9.72833 31.9035 9.72833H27.6403ZM28.4872 12.1879C28.2639 12.1879 28.0832 12.0202 28.0832 11.8133C28.0832 11.6064 28.2639 11.4388 28.4872 11.4388H32.7504C32.9736 11.4388 33.1545 11.6063 33.1545 11.8133C33.1545 12.0202 32.9736 12.1879 32.7504 12.1879H28.4872ZM29.3328 14.6463C29.1096 14.6463 28.9287 14.4786 28.9287 14.2717C28.9287 14.0648 29.1095 13.8972 29.3328 13.8972H33.596C33.8193 13.8972 34 14.0648 34 14.2717C34 14.4786 33.8193 14.6463 33.596 14.6463H29.3328ZM19.8932 22C18.5011 22 17.3685 20.9502 17.3685 19.6597C17.3685 18.3704 18.5011 17.321 19.8932 17.321C21.2843 17.321 22.4162 18.3704 22.4162 19.6597C22.4162 20.9502 21.2843 22 19.8932 22ZM19.8932 18.0701C18.9463 18.0701 18.1765 18.7831 18.1765 19.6597C18.1765 20.5376 18.9462 21.2511 19.8932 21.2511C20.8388 21.2511 21.6081 20.5375 21.6081 19.6597C21.6081 18.7831 20.8389 18.0701 19.8932 18.0701ZM25.3522 7.74901C25.129 7.74901 24.9482 7.58137 24.9482 7.37445C24.9482 7.16753 25.129 7 25.3522 7H30.0268C30.2499 7 30.4308 7.16753 30.4308 7.37445C30.4308 7.58137 30.2499 7.74901 30.0268 7.74901H25.3522ZM14.404 13.6857C14.1808 13.6857 14 13.5182 14 13.3113C14 13.1044 14.1807 12.9369 14.404 12.9369H22.0637C22.2869 12.9369 22.4676 13.1044 22.4676 13.3113C22.4676 13.5182 22.2869 13.6857 22.0637 13.6857H14.404ZM14.8421 13.6898C14.7388 13.6898 14.6351 13.6532 14.5563 13.5801C14.3985 13.4338 14.3985 13.1966 14.5563 13.0504L18.3992 9.48819C18.557 9.34201 18.8129 9.34201 18.9707 9.48819C19.1283 9.63433 19.1283 9.87167 18.9707 10.0178L15.1277 13.5801C15.0489 13.6532 14.9451 13.6898 14.8421 13.6898ZM22.0637 13.6898C21.8405 13.6898 21.6597 13.5222 21.6597 13.3152V9.07603C21.6597 9.06308 21.6609 9.05073 21.6621 9.03836C21.7131 7.90646 22.7231 7.00002 23.957 7.00002H25.4759C25.6992 7.00002 25.88 7.16755 25.88 7.37447C25.88 7.58139 25.6992 7.74903 25.4759 7.74903H23.957C23.1356 7.74903 22.4676 8.36752 22.4676 9.12831V13.3152C22.4677 13.5222 22.2869 13.6898 22.0637 13.6898ZM16.2966 19.6266C15.0621 19.6266 14.0521 18.7195 14.0024 17.5871C14.0007 17.5748 14 17.5624 14 17.55V13.3114C14 13.1044 14.1808 12.9369 14.404 12.9369C14.6273 12.9369 14.8081 13.1044 14.8081 13.3114V17.4988C14.8081 18.2591 15.476 18.8775 16.2966 18.8775H17.8138C18.0371 18.8775 18.2178 19.0452 18.2178 19.2521C18.2178 19.459 18.0371 19.6266 17.8138 19.6266H16.2966ZM21.9661 19.6266C21.7429 19.6266 21.562 19.459 21.562 19.2521C21.562 19.0452 21.7428 18.8775 21.966 18.8775H27.0702C27.2934 18.8775 27.4741 19.0452 27.4741 19.2521C27.4741 19.459 27.2934 19.6266 27.0702 19.6266H21.9661Z" fill="#01B9D1"/>
                        </svg>
                      </el-button>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>

                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                        @size-change="sizeChangeHandle"
                        @current-change="CurrentChangeHandle"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--2.已发货表單-->
            <el-tab-pane label="已发货" name="2">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="shippedDataList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          :row-class-name="tableRowClassName">
                  <el-table-column fixed prop="orderId" align="center" width="80px"/>
                  <el-table-column label="订单编号" prop="orderNumber" align="center" width="180px"/>
                  <el-table-column label="学生编号" prop="studentId" align="center" width="120px"/>
                  <el-table-column label="商品编号" prop="commodityId" align="center" width="120px"/>
                  <el-table-column label="物流跟踪号" prop="trackingNumber" align="center" width="120px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.trackingNumber" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.trackingNumber}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="下单时间" prop="orderDate" align="center"/>
                  <el-table-column label="发货时间" prop="shipDate" align="center"/>
                  <el-table-column fixed="right" align="center">
                    <template #default="scope">
                      <!--追蹤訂單按鈕-->
                      <el-button type="text" @click="checkTimeLine(scope.row)" :class="['custom-button']">
                        <svg width="45" height="25" viewBox="0 0 48 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect width="48" height="28" rx="14" fill="#DAF3F8"/>
                          <path d="M31.2849 19.6266C31.0616 19.6266 30.8809 19.459 30.8809 19.2521C30.8809 19.0452 31.0616 18.8775 31.2849 18.8775H33.2358C33.459 18.8775 33.6397 19.0452 33.6397 19.2521C33.6397 19.459 33.459 19.6266 33.2358 19.6266H31.2849ZM29.1659 21.8893C27.7744 21.8893 26.6418 20.8395 26.6418 19.549C26.6418 18.2585 27.7744 17.2087 29.1659 17.2087C30.557 17.2087 31.6888 18.2585 31.6888 19.549C31.6888 20.8395 30.557 21.8893 29.1659 21.8893ZM29.1659 17.9576C28.2197 17.9576 27.4499 18.6712 27.4499 19.549C27.4499 20.4268 28.2197 21.1403 29.1659 21.1403C30.1117 21.1403 30.8809 20.4268 30.8809 19.549C30.8809 18.6711 30.1117 17.9576 29.1659 17.9576ZM18.6849 10.1275C18.4617 10.1275 18.2809 9.95998 18.2809 9.75302C18.2809 9.5461 18.4616 9.37857 18.6849 9.37857H22.0637C22.2869 9.37857 22.4678 9.5461 22.4678 9.75302C22.4678 9.95996 22.2869 10.1275 22.0637 10.1275H18.6849ZM27.6403 9.72833C27.4171 9.72833 27.2364 9.56071 27.2364 9.35377C27.2364 9.14685 27.4171 8.97932 27.6403 8.97932H31.9035C32.1268 8.97932 32.3076 9.14685 32.3076 9.35377C32.3076 9.56071 32.1268 9.72833 31.9035 9.72833H27.6403ZM28.4872 12.1879C28.2639 12.1879 28.0832 12.0202 28.0832 11.8133C28.0832 11.6064 28.2639 11.4388 28.4872 11.4388H32.7504C32.9736 11.4388 33.1545 11.6063 33.1545 11.8133C33.1545 12.0202 32.9736 12.1879 32.7504 12.1879H28.4872ZM29.3328 14.6463C29.1096 14.6463 28.9287 14.4786 28.9287 14.2717C28.9287 14.0648 29.1095 13.8972 29.3328 13.8972H33.596C33.8193 13.8972 34 14.0648 34 14.2717C34 14.4786 33.8193 14.6463 33.596 14.6463H29.3328ZM19.8932 22C18.5011 22 17.3685 20.9502 17.3685 19.6597C17.3685 18.3704 18.5011 17.321 19.8932 17.321C21.2843 17.321 22.4162 18.3704 22.4162 19.6597C22.4162 20.9502 21.2843 22 19.8932 22ZM19.8932 18.0701C18.9463 18.0701 18.1765 18.7831 18.1765 19.6597C18.1765 20.5376 18.9462 21.2511 19.8932 21.2511C20.8388 21.2511 21.6081 20.5375 21.6081 19.6597C21.6081 18.7831 20.8389 18.0701 19.8932 18.0701ZM25.3522 7.74901C25.129 7.74901 24.9482 7.58137 24.9482 7.37445C24.9482 7.16753 25.129 7 25.3522 7H30.0268C30.2499 7 30.4308 7.16753 30.4308 7.37445C30.4308 7.58137 30.2499 7.74901 30.0268 7.74901H25.3522ZM14.404 13.6857C14.1808 13.6857 14 13.5182 14 13.3113C14 13.1044 14.1807 12.9369 14.404 12.9369H22.0637C22.2869 12.9369 22.4676 13.1044 22.4676 13.3113C22.4676 13.5182 22.2869 13.6857 22.0637 13.6857H14.404ZM14.8421 13.6898C14.7388 13.6898 14.6351 13.6532 14.5563 13.5801C14.3985 13.4338 14.3985 13.1966 14.5563 13.0504L18.3992 9.48819C18.557 9.34201 18.8129 9.34201 18.9707 9.48819C19.1283 9.63433 19.1283 9.87167 18.9707 10.0178L15.1277 13.5801C15.0489 13.6532 14.9451 13.6898 14.8421 13.6898ZM22.0637 13.6898C21.8405 13.6898 21.6597 13.5222 21.6597 13.3152V9.07603C21.6597 9.06308 21.6609 9.05073 21.6621 9.03836C21.7131 7.90646 22.7231 7.00002 23.957 7.00002H25.4759C25.6992 7.00002 25.88 7.16755 25.88 7.37447C25.88 7.58139 25.6992 7.74903 25.4759 7.74903H23.957C23.1356 7.74903 22.4676 8.36752 22.4676 9.12831V13.3152C22.4677 13.5222 22.2869 13.6898 22.0637 13.6898ZM16.2966 19.6266C15.0621 19.6266 14.0521 18.7195 14.0024 17.5871C14.0007 17.5748 14 17.5624 14 17.55V13.3114C14 13.1044 14.1808 12.9369 14.404 12.9369C14.6273 12.9369 14.8081 13.1044 14.8081 13.3114V17.4988C14.8081 18.2591 15.476 18.8775 16.2966 18.8775H17.8138C18.0371 18.8775 18.2178 19.0452 18.2178 19.2521C18.2178 19.459 18.0371 19.6266 17.8138 19.6266H16.2966ZM21.9661 19.6266C21.7429 19.6266 21.562 19.459 21.562 19.2521C21.562 19.0452 21.7428 18.8775 21.966 18.8775H27.0702C27.2934 18.8775 27.4741 19.0452 27.4741 19.2521C27.4741 19.459 27.2934 19.6266 27.0702 19.6266H21.9661Z" fill="#01B9D1"/>
                        </svg>
                      </el-button> <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex"
                        v-model:page-size="pageSize"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage"
                        @size-change="sizeChangeHandle"
                        @current-change="CurrentChangeHandle"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--3.已完成表單-->
            <el-tab-pane label="已完成" name="3">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="completedDataList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          :row-class-name="tableRowClassName">
                  <el-table-column fixed prop="orderId" align="center" width="80px"/>
                  <el-table-column label="订单编号" prop="orderNumber" align="center" width="180px"/>
                  <el-table-column label="学生编号" prop="studentId" align="center" width="120px"/>
                  <el-table-column label="商品编号" prop="commodityId" align="center" width="120px"/>
                  <el-table-column label="物流跟踪号" prop="trackingNumber" align="center" width="120px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.trackingNumber" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.trackingNumber}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="下单时间" prop="orderDate" align="center"/>
                  <el-table-column label="完成时间" prop="completeDate" align="center"/>
                  <el-table-column fixed="right" align="center">
                    <template #default="scope">
                      <!--追蹤訂單按鈕-->
                      <el-button type="text" @click="checkTimeLine(scope.row)" :class="['custom-button']">
                        <svg width="45" height="25" viewBox="0 0 48 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect width="48" height="28" rx="14" fill="#DAF3F8"/>
                          <path d="M31.2849 19.6266C31.0616 19.6266 30.8809 19.459 30.8809 19.2521C30.8809 19.0452 31.0616 18.8775 31.2849 18.8775H33.2358C33.459 18.8775 33.6397 19.0452 33.6397 19.2521C33.6397 19.459 33.459 19.6266 33.2358 19.6266H31.2849ZM29.1659 21.8893C27.7744 21.8893 26.6418 20.8395 26.6418 19.549C26.6418 18.2585 27.7744 17.2087 29.1659 17.2087C30.557 17.2087 31.6888 18.2585 31.6888 19.549C31.6888 20.8395 30.557 21.8893 29.1659 21.8893ZM29.1659 17.9576C28.2197 17.9576 27.4499 18.6712 27.4499 19.549C27.4499 20.4268 28.2197 21.1403 29.1659 21.1403C30.1117 21.1403 30.8809 20.4268 30.8809 19.549C30.8809 18.6711 30.1117 17.9576 29.1659 17.9576ZM18.6849 10.1275C18.4617 10.1275 18.2809 9.95998 18.2809 9.75302C18.2809 9.5461 18.4616 9.37857 18.6849 9.37857H22.0637C22.2869 9.37857 22.4678 9.5461 22.4678 9.75302C22.4678 9.95996 22.2869 10.1275 22.0637 10.1275H18.6849ZM27.6403 9.72833C27.4171 9.72833 27.2364 9.56071 27.2364 9.35377C27.2364 9.14685 27.4171 8.97932 27.6403 8.97932H31.9035C32.1268 8.97932 32.3076 9.14685 32.3076 9.35377C32.3076 9.56071 32.1268 9.72833 31.9035 9.72833H27.6403ZM28.4872 12.1879C28.2639 12.1879 28.0832 12.0202 28.0832 11.8133C28.0832 11.6064 28.2639 11.4388 28.4872 11.4388H32.7504C32.9736 11.4388 33.1545 11.6063 33.1545 11.8133C33.1545 12.0202 32.9736 12.1879 32.7504 12.1879H28.4872ZM29.3328 14.6463C29.1096 14.6463 28.9287 14.4786 28.9287 14.2717C28.9287 14.0648 29.1095 13.8972 29.3328 13.8972H33.596C33.8193 13.8972 34 14.0648 34 14.2717C34 14.4786 33.8193 14.6463 33.596 14.6463H29.3328ZM19.8932 22C18.5011 22 17.3685 20.9502 17.3685 19.6597C17.3685 18.3704 18.5011 17.321 19.8932 17.321C21.2843 17.321 22.4162 18.3704 22.4162 19.6597C22.4162 20.9502 21.2843 22 19.8932 22ZM19.8932 18.0701C18.9463 18.0701 18.1765 18.7831 18.1765 19.6597C18.1765 20.5376 18.9462 21.2511 19.8932 21.2511C20.8388 21.2511 21.6081 20.5375 21.6081 19.6597C21.6081 18.7831 20.8389 18.0701 19.8932 18.0701ZM25.3522 7.74901C25.129 7.74901 24.9482 7.58137 24.9482 7.37445C24.9482 7.16753 25.129 7 25.3522 7H30.0268C30.2499 7 30.4308 7.16753 30.4308 7.37445C30.4308 7.58137 30.2499 7.74901 30.0268 7.74901H25.3522ZM14.404 13.6857C14.1808 13.6857 14 13.5182 14 13.3113C14 13.1044 14.1807 12.9369 14.404 12.9369H22.0637C22.2869 12.9369 22.4676 13.1044 22.4676 13.3113C22.4676 13.5182 22.2869 13.6857 22.0637 13.6857H14.404ZM14.8421 13.6898C14.7388 13.6898 14.6351 13.6532 14.5563 13.5801C14.3985 13.4338 14.3985 13.1966 14.5563 13.0504L18.3992 9.48819C18.557 9.34201 18.8129 9.34201 18.9707 9.48819C19.1283 9.63433 19.1283 9.87167 18.9707 10.0178L15.1277 13.5801C15.0489 13.6532 14.9451 13.6898 14.8421 13.6898ZM22.0637 13.6898C21.8405 13.6898 21.6597 13.5222 21.6597 13.3152V9.07603C21.6597 9.06308 21.6609 9.05073 21.6621 9.03836C21.7131 7.90646 22.7231 7.00002 23.957 7.00002H25.4759C25.6992 7.00002 25.88 7.16755 25.88 7.37447C25.88 7.58139 25.6992 7.74903 25.4759 7.74903H23.957C23.1356 7.74903 22.4676 8.36752 22.4676 9.12831V13.3152C22.4677 13.5222 22.2869 13.6898 22.0637 13.6898ZM16.2966 19.6266C15.0621 19.6266 14.0521 18.7195 14.0024 17.5871C14.0007 17.5748 14 17.5624 14 17.55V13.3114C14 13.1044 14.1808 12.9369 14.404 12.9369C14.6273 12.9369 14.8081 13.1044 14.8081 13.3114V17.4988C14.8081 18.2591 15.476 18.8775 16.2966 18.8775H17.8138C18.0371 18.8775 18.2178 19.0452 18.2178 19.2521C18.2178 19.459 18.0371 19.6266 17.8138 19.6266H16.2966ZM21.9661 19.6266C21.7429 19.6266 21.562 19.459 21.562 19.2521C21.562 19.0452 21.7428 18.8775 21.966 18.8775H27.0702C27.2934 18.8775 27.4741 19.0452 27.4741 19.2521C27.4741 19.459 27.2934 19.6266 27.0702 19.6266H21.9661Z" fill="#01B9D1"/>
                        </svg>
                      </el-button>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex2"
                        v-model:page-size="pageSize2"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage2"
                        @size-change="sizeChangeHandle2"
                        @current-change="CurrentChangeHandle2"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
            <!--4.已取消表單-->
            <el-tab-pane label="已取消" name="4">
              <div class="table-container">
                <!-- 数据表单 -->
                <el-table :data="canceledDataList"
                          style="width: 100%;margin-top: 10px"
                          ref="multipleTable"
                          :row-class-name="tableRowClassName">
                  <el-table-column fixed prop="orderId" align="center" width="80px"/>
                  <el-table-column label="订单编号" prop="orderNumber" align="center" width="180px"/>
                  <el-table-column label="学生编号" prop="studentId" align="center" width="120px"/>
                  <el-table-column label="商品编号" prop="commodityId" align="center" width="120px"/>
                  <el-table-column label="物流跟踪号" prop="trackingNumber" align="center" width="180px">
                    <template #default="scope">
                      <el-input type="text" v-model="scope.row.trackingNumber" v-show="scope.row.iseditor" class="input-center" />
                      <span v-show="!scope.row.iseditor">{{scope.row.trackingNumber}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="下单时间" prop="orderDate" align="center"/>
                  <el-table-column label="取消时间" prop="cancelDate" align="center"/>
                  <el-table-column fixed="right" align="center" width="120px">
                    <template #default="scope">
                      <!--追蹤訂單按鈕-->
                      <el-button type="text" @click="checkTimeLine(scope.row)" :class="['custom-button']">
                        <svg width="45" height="25" viewBox="0 0 48 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <rect width="48" height="28" rx="14" fill="#DAF3F8"/>
                          <path d="M31.2849 19.6266C31.0616 19.6266 30.8809 19.459 30.8809 19.2521C30.8809 19.0452 31.0616 18.8775 31.2849 18.8775H33.2358C33.459 18.8775 33.6397 19.0452 33.6397 19.2521C33.6397 19.459 33.459 19.6266 33.2358 19.6266H31.2849ZM29.1659 21.8893C27.7744 21.8893 26.6418 20.8395 26.6418 19.549C26.6418 18.2585 27.7744 17.2087 29.1659 17.2087C30.557 17.2087 31.6888 18.2585 31.6888 19.549C31.6888 20.8395 30.557 21.8893 29.1659 21.8893ZM29.1659 17.9576C28.2197 17.9576 27.4499 18.6712 27.4499 19.549C27.4499 20.4268 28.2197 21.1403 29.1659 21.1403C30.1117 21.1403 30.8809 20.4268 30.8809 19.549C30.8809 18.6711 30.1117 17.9576 29.1659 17.9576ZM18.6849 10.1275C18.4617 10.1275 18.2809 9.95998 18.2809 9.75302C18.2809 9.5461 18.4616 9.37857 18.6849 9.37857H22.0637C22.2869 9.37857 22.4678 9.5461 22.4678 9.75302C22.4678 9.95996 22.2869 10.1275 22.0637 10.1275H18.6849ZM27.6403 9.72833C27.4171 9.72833 27.2364 9.56071 27.2364 9.35377C27.2364 9.14685 27.4171 8.97932 27.6403 8.97932H31.9035C32.1268 8.97932 32.3076 9.14685 32.3076 9.35377C32.3076 9.56071 32.1268 9.72833 31.9035 9.72833H27.6403ZM28.4872 12.1879C28.2639 12.1879 28.0832 12.0202 28.0832 11.8133C28.0832 11.6064 28.2639 11.4388 28.4872 11.4388H32.7504C32.9736 11.4388 33.1545 11.6063 33.1545 11.8133C33.1545 12.0202 32.9736 12.1879 32.7504 12.1879H28.4872ZM29.3328 14.6463C29.1096 14.6463 28.9287 14.4786 28.9287 14.2717C28.9287 14.0648 29.1095 13.8972 29.3328 13.8972H33.596C33.8193 13.8972 34 14.0648 34 14.2717C34 14.4786 33.8193 14.6463 33.596 14.6463H29.3328ZM19.8932 22C18.5011 22 17.3685 20.9502 17.3685 19.6597C17.3685 18.3704 18.5011 17.321 19.8932 17.321C21.2843 17.321 22.4162 18.3704 22.4162 19.6597C22.4162 20.9502 21.2843 22 19.8932 22ZM19.8932 18.0701C18.9463 18.0701 18.1765 18.7831 18.1765 19.6597C18.1765 20.5376 18.9462 21.2511 19.8932 21.2511C20.8388 21.2511 21.6081 20.5375 21.6081 19.6597C21.6081 18.7831 20.8389 18.0701 19.8932 18.0701ZM25.3522 7.74901C25.129 7.74901 24.9482 7.58137 24.9482 7.37445C24.9482 7.16753 25.129 7 25.3522 7H30.0268C30.2499 7 30.4308 7.16753 30.4308 7.37445C30.4308 7.58137 30.2499 7.74901 30.0268 7.74901H25.3522ZM14.404 13.6857C14.1808 13.6857 14 13.5182 14 13.3113C14 13.1044 14.1807 12.9369 14.404 12.9369H22.0637C22.2869 12.9369 22.4676 13.1044 22.4676 13.3113C22.4676 13.5182 22.2869 13.6857 22.0637 13.6857H14.404ZM14.8421 13.6898C14.7388 13.6898 14.6351 13.6532 14.5563 13.5801C14.3985 13.4338 14.3985 13.1966 14.5563 13.0504L18.3992 9.48819C18.557 9.34201 18.8129 9.34201 18.9707 9.48819C19.1283 9.63433 19.1283 9.87167 18.9707 10.0178L15.1277 13.5801C15.0489 13.6532 14.9451 13.6898 14.8421 13.6898ZM22.0637 13.6898C21.8405 13.6898 21.6597 13.5222 21.6597 13.3152V9.07603C21.6597 9.06308 21.6609 9.05073 21.6621 9.03836C21.7131 7.90646 22.7231 7.00002 23.957 7.00002H25.4759C25.6992 7.00002 25.88 7.16755 25.88 7.37447C25.88 7.58139 25.6992 7.74903 25.4759 7.74903H23.957C23.1356 7.74903 22.4676 8.36752 22.4676 9.12831V13.3152C22.4677 13.5222 22.2869 13.6898 22.0637 13.6898ZM16.2966 19.6266C15.0621 19.6266 14.0521 18.7195 14.0024 17.5871C14.0007 17.5748 14 17.5624 14 17.55V13.3114C14 13.1044 14.1808 12.9369 14.404 12.9369C14.6273 12.9369 14.8081 13.1044 14.8081 13.3114V17.4988C14.8081 18.2591 15.476 18.8775 16.2966 18.8775H17.8138C18.0371 18.8775 18.2178 19.0452 18.2178 19.2521C18.2178 19.459 18.0371 19.6266 17.8138 19.6266H16.2966ZM21.9661 19.6266C21.7429 19.6266 21.562 19.459 21.562 19.2521C21.562 19.0452 21.7428 18.8775 21.966 18.8775H27.0702C27.2934 18.8775 27.4741 19.0452 27.4741 19.2521C27.4741 19.459 27.2934 19.6266 27.0702 19.6266H21.9661Z" fill="#01B9D1"/>
                        </svg>
                      </el-button>
                      <!--查看詳情按鈕-->
                      <el-button type="text" @click="checkData(scope.$index, scope.row)" :class="['custom-button']">
                        <svg t="1708696256461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                             p-id="19713" data-spm-anchor-id="a313x.search_index.0.i43.5b243a81J42vG4" width="25" height="25"><path d="M900.3 521.728c-1.126-2.765-28.978-69.018-90.418-135.885-36.25-39.424-76.8-70.963-120.525-93.593-54.887-28.468-114.79-42.906-177.869-42.906-64.614 0-125.44 14.438-180.531 42.906-43.93 22.63-84.378 54.17-120.115 93.798-60.519 66.97-86.528 133.427-87.552 136.192l-3.38 8.806 4.506 8.295c1.331 2.457 32.87 59.801 96.051 117.657 37.171 34.1 77.824 61.236 120.627 80.692 53.76 24.473 111.104 36.966 170.496 36.966 58.573 0 115.508-12.39 169.268-36.966 42.7-19.456 83.456-46.695 120.934-80.692 63.693-57.753 96.256-115.097 97.587-117.452l4.813-8.704-3.891-9.114zM773.223 627.61c-34.406 30.924-71.475 55.603-110.182 73.216-48.128 21.81-99.02 32.87-151.45 32.87-53.145 0-104.55-11.06-152.78-32.87-38.81-17.613-75.674-42.19-109.67-73.114-44.954-40.858-73.012-82.33-83.764-99.635 8.909-19.456 33.485-67.891 76.902-115.712 32.359-35.635 68.813-63.898 108.237-84.173 49.05-25.19 103.22-37.888 161.075-37.888 56.218 0 109.466 12.8 158.31 37.888 39.322 20.275 75.982 48.64 109.057 84.378 44.032 47.616 69.837 95.948 79.462 115.61-11.366 17.51-40.038 58.674-85.197 99.43z" fill="#8a8a8a" p-id="19714" data-spm-anchor-id="a313x.search_index.0.i44.5b243a81J42vG4" class="selected"></path><path d="M511.59 349.491c-83.558 0-151.552 67.994-151.552 151.552s67.994 151.552 151.552 151.552 151.552-67.993 151.552-151.552S595.15 349.491 511.59 349.491z m0 262.144c-61.03 0-110.592-49.664-110.592-110.592 0-61.03 49.664-110.592 110.592-110.592 61.03 0 110.592 49.664 110.592 110.592 0 61.03-49.561 110.592-110.592 110.592z" fill="#01b9d1" p-id="19715" data-spm-anchor-id="a313x.search_index.0.i42.5b243a81J42vG4" class=""></path></svg> </el-button>
                    </template>
                  </el-table-column>
                  <template v-slot:empty>
                    <el-empty image-size="80"></el-empty>
                  </template>
                </el-table>
                <div class="block">
                  <!-- 页号 -->
                  <el-config-provider :locale="locale">  <!--切换语言包为中文包-->
                    <el-pagination
                        v-model:current-page="pageIndex3"
                        v-model:page-size="pageSize3"
                        :page-sizes="[5,10,15, 20]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalPage3"
                        @size-change="sizeChangeHandle3"
                        @current-change="CurrentChangeHandle3"
                        style="margin-top: 30px"/>
                  </el-config-provider>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </el-card>

  <!-- 訂單詳情弹窗 -->
  <div>
    <el-dialog
        v-model="orderDataVisible"
        title="订单详情"
        center
        width="60%"
        :custom-class="'rounded-dialog'"
    >
      <el-steps :active="1" align-center>
        <el-step title="待处理" :description="this.orderDate"></el-step>
        <el-step title="已发货" :description="this.shipDate"></el-step>
        <el-step title="已完成" :description="this.completeDate"></el-step>
        <el-step title="已取消" :description="this.cancelDate"></el-step>
      </el-steps>
    </el-dialog>
  </div>

  <div>
    <el-dialog
        v-model="timeLineVisible"
        title="订单追踪"
        center
        width="25%"
        :custom-class="'rounded-dialog'"
    >
      <el-timeline :reverse=true>
        <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.time"
            :color="activity.color">
          {{activity.stateName}}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>

</template>

<script>
import axios from 'axios';
import {ElMessage} from "element-plus";

export default{
  name: "userManagement",
  data() {
    return {
      //1.待处理訂單的数据集合
      pendingDataList: [],
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      //2.已發貨訂單的数据集合
      shippedDataList: [],
      pageIndex1: 1,
      pageSize1: 5,
      totalPage1: 0,
      begin1: 0,
      end1: this.pageSize1 - 1,
      //3.已完成訂單的数据集合
      completedDataList: [],
      pageIndex2: 1,
      pageSize2: 5,
      totalPage2: 0,
      begin2: 0,
      end2: this.pageSize2 - 1,
      //4.已取消訂單的数据集合
      canceledDataList: [],
      pageIndex3: 1,
      pageSize3: 5,
      totalPage3: 0,
      begin3: 0,
      end3: this.pageSize - 1,


      dataForm: {
        orderId:0,studentId:0,commodityId:0,quantity:0,status:0,orderDate: '',
        shipDate: '', cancelDate: '', completeDate: '', address:'',contactName: '',
        contactPhone: '', pointsUsed:0, trackingNumber: '', notes: ''
      },
      getState:"",
      value1: '',
      value2: '',
      // 搜索框内容
      inputForm:{
        studentId: null,
        commodityId:null
      },
      statusOptions: [
        {statusValue: 1, label: '待处理'},
        {statusValue: 2, label: '已发货'},
        {statusValue: 3, label: '已完成'},
        {statusValue: 4, label: '已取消'},
        ],
      statusValue: '',
      activeName: "1",// 当前选中的tab
      activeTab: '', // 存储当前激活的标签页的名称
      type:1,
      orderDataVisible:false,
      orderId:0,
      orderDataForm:[],
      orderDate:"",
      shipDate:"",
      cancelDate:"",
      completeDate:"",
      //訂單追踪彈窗
      timeLineVisible:false,
      activities: []
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      if(tab.props.name === "1"){
        this.activeTab = "1";
        this.type=1;
        this.getPendingDataList();
      }else if(tab.props.name === "2"){
        this.activeTab = "2";
        this.type=2;
        this.getShippedDataList();
      }else if(tab.props.name === "3"){
        this.activeTab = "3";
        this.type=3;
        this.getCompletedDataList();
      } else if(tab.props.name === "4"){
        this.activeTab = "4";
        this.type=4;
        this.getCanceledDataList();
      }
    },
    /*分页方法*/
    getPageInfo(pageSize, pageNum) {
      return {
        "pageSize": pageSize,
        "pageNum": pageNum
      }
    },

    /*1.顯示待处理數據*/
    // 改变数组大小
    sizeChangeHandle(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getPendingDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.dataList = [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getPendingDataList();
      }
    },
    //查询所有数据
    async getPendingDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize, this.pageIndex);
        console.log(pageInfo);

        const res = await axios.post('/pointsMallManage/getPendingOrderList', pageInfo);

        if (res.status === 200) {
          this.pendingDataList = res.data.data.list.map(item => {
            console.log("查詢數據",item.avatar);
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*2.顯示已發貨數據*/
    // 改变数组大小
    sizeChangeHandle1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getShippedDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle1(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex1 = val;
      this.shippedDataList= [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getShippedDataList();
      }
    },
    //查询所有数据
    async getShippedDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize1, this.pageIndex1);
        console.log(pageInfo);

        const res = await axios.post('/pointsMallManage/getShippedOrderList', pageInfo);

        if (res.status === 200) {
          this.shippedDataList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage1 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*3.顯示已完成數據*/
    // 改变数组大小
    sizeChangeHandle2(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize2 = val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getCompletedDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle2(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex2 = val;
      this.completedDataList= [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getCompletedDataList();
      }
    },
    //查询所有数据
    async getCompletedDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize2, this.pageIndex2);
        console.log(pageInfo);

        const res = await axios.post('/pointsMallManage/getCompletedOrderList', pageInfo);

        if (res.status === 200) {
          this.completedDataList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage2 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    /*4.顯示已取消數據*/
    // 改变数组大小
    sizeChangeHandle3(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize3= val;

      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getCanceledDataList();
      }
    },
    // 改变当前页号
    CurrentChangeHandle3(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex3 = val;
      this.canceledDataList= [];
      if(this.inputNumber!==null){
        this.searchDataList();
      }
      else{
        this.getCanceledDataList();
      }
    },
    //查询所有数据
    async getCanceledDataList() {
      try {
        const pageInfo = this.getPageInfo(this.pageSize3, this.pageIndex3);
        console.log(pageInfo);

        const res = await axios.post('/pointsMallManage/getCanceledOrderList', pageInfo);

        if (res.status === 200) {
          this.canceledDataList = res.data.data.list.map(item => {
            let showEditor=true;
            let iseditor=false;
            return {
              ...item,
              showEditor,
              iseditor
            };
          });
          this.totalPage3 = res.data.data.total;
        } else {
          console.error('Error fetching data:', res.statusText);
          ElMessage('获取表单数据失败');
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('获取表单数据失败');
      }
    },
    resetInputForm() {
      this.inputForm = {
        studentId: '',
        commodityId: '',
      };
    },
    /*查詢數據*/
    //0.定義查詢用户信息
    searchOrderInfo(pageSize,pageNum,studentId,commodityId,status,canceled){
      return {
        "pageSize": pageSize, "pageNum": pageNum,"studentId": studentId, "commodityId":commodityId,"status":status,"canceled":canceled
      };
    },
    //1.查询数据
    async searchDataList() {
      try {
        const studentId=this.inputForm.studentId;
        const commodityId=this.inputForm.commodityId;
        let searchData;  // 在此定义 searchData 变量，以便在后续使用


        if (this.type === 1) {
          searchData = this.searchOrderInfo(this.pageSize, this.pageIndex,studentId,commodityId,1,2);
          console.log("查詢參數:studentId:",studentId,"commodityId:",commodityId);
        } else if (this.type === 2) {
          searchData = this.searchOrderInfo(this.pageSize1, this.pageIndex1,studentId,commodityId,2,2);
        } else if (this.type === 3) {
          searchData = this.searchOrderInfo(this.pageSize2, this.pageIndex2,studentId,commodityId,3,2);
        }else if (this.type === 4) {
          searchData = this.searchOrderInfo(this.pageSize3, this.pageIndex3,studentId,commodityId,0,1);
          console.log("查詢參數:studentId:",studentId,"commodityId:",commodityId);
        }

        if (studentId||commodityId) {
          const res = await axios.post('/pointsMallManage/searchOrderList', searchData);
          console.log("檢索返回值",res.status);
          if(this.type === 1){
            if (res.status === 200) {
              this.pendingDataList = res.data.data.list;
              this.totalPage = res.data.data.total;
              console.log("待处理數據",this.pendingDataList);
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
          if(this.type === 2){
            if (res.status === 200) {
              this.shippedDataList = res.data.data.list;
              this.totalPage1 = res.data.data.total;
              console.log("已發貨數據",this.shippedDataList);
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
          if(this.type === 3){
            if (res.status === 200) {
              this.completedDataList = res.data.data.list;

              this.totalPage2 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
          if(this.type === 4){
            if (res.status === 200) {
              this.canceledDataList = res.data.data.list;

              this.totalPage3 = res.data.data.total;
            } else {
              console.error('Error fetching data:', res.statusText);
              ElMessage('获取表单数据失败');
            }
          }
        } else {
          if(this.type === 1)  this.getPendingDataList();
          if(this.type === 2)  this.getShippedDataList();
          if(this.type === 3)  this.getCompletedDataList();
          if(this.type === 4)  this.getCanceledDataList();
        }
      } catch (error) {
        console.error('Error fetching data:', error);
        ElMessage('出错了');
        if(this.type === 1)  this.getPendingDataList();
        if(this.type === 2)  this.getShippedDataList();
        if(this.type === 3)  this.getCompletedDataList();
        if(this.type === 4)  this.getCanceledDataList();
      }
    },


    //訂單詳情
    checkData(index, row){
      this.$router.push({path:'/mallManagement/OrderDetail',query:{orderId:row.orderId}})
    },

    //訂單追蹤
    async checkTimeLine(row){
     // let orderId=row.orderId;
      this.timeLineVisible = true;

      const res = await axios.get('/pointsMallManage/getTimeLine/'+row.orderId)

      if (res.data.data != null) {
        this.activities = res.data.data
      }else{
        ElMessage({
          message: '出错了',
        })
      }

    }
  },
  watch: {
    // 监听type变化
    type(newType, oldType) {
      if (newType !== oldType) {
        this.resetInputForm();
      }
    },
  },
  // Use the beforeCreate hook to initialize the 'end' property
  beforeCreate() {
    this.end = this.pageSize - 1;
    this.end1 = this.pageSize1 - 1;
    this.end2 = this.pageSize2 - 1;
    this.end3 = this.pageSize3 - 1;
  },

  mounted() {
    this.getPendingDataList();
  }
}
</script>

<style scoped lang="scss">
@import "@/theme/common.css";
@import "@/theme/commonTable.css";
</style>